<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Martel:wght@200;300;400;600;700;800;900&display=swap"
          rel="stylesheet">
    <title>Document</title>
</head>
<body>


<!-- ---------- HEADER ---------- -->
<header class="header">
    <div class="content">

        <!-- ---------- HEADER-NAVBAR -->
        <div class="header__navbar">

            <div class="header__navbar-title">
                <p class="common-title-s">
                    <a href="#">Litigade</a>
                </p>
                <div class="navbar__title-adaptive-buttons">
                    <button class="navbar__search-button"><img src="img/header/search.png" alt="Search"></button>
                    <button class="navbar__card-button"><img src="img/header/card.png" alt="Card"></button>
                    <button class="navbar__burger-menu"><img src="img/header/burger.png" alt="Menu"></button>
                </div>
            </div>

            <div class="header__navbar-ul">

                <ul>
                    <li class="navbar__item">Home</li>
                    <li class="navbar__item">Product</li>
                    <li class="navbar__item">Pricing</li>
                    <li class="navbar__item">Contact</li>
                </ul>

            </div>

            <div class="header__navbar-buttons">
                <div>
                    <button class="navbar__search-button"><img src="img/header/search.png" alt="Search"></button>
                    <button class="navbar__card-button"><img src="img/header/card.png" alt="Card"></button>
                </div>
                <button class="navbar__burger-menu"><img src="img/header/burger.png" alt="Menu"></button>
            </div>

        </div>

        <!-- ---------- HEADER-BOOKING-BLOCK -->
        <div class="header__booking-block">

            <div class="header__info-block">

                <h1 class="common-title-l">Help to reclaim your life and freedom</h1>

                <p class="span-title">We know how large objects will act, but things on a
                    small scale.</p>

                <div class="header__buttons-block">
                    <button class="header__quote-button bg-brown">Get Quote Now</button>
                    <button class="header__learn-button">Learn More</button>
                </div>


            </div>

            <div class="header__booking-form">

                <p class="common-title-s">Book Appointment</p>

                <div class="booking-form__input-block">
                    <p class="booking-title">Name *</p>
                    <label>
                        <input type="text" name="" placeholder="Full name">
                    </label>
                </div>
                <div class="booking-form__input-block">
                    <p class="booking-title">Email *</p>
                    <label>
                        <input type="text" placeholder="example@gmail.com" name="">
                    </label>
                </div>
                <div class="booking-form__input-block">
                    <p class="booking-title">Department *</p>
                    <label>
                        <input type="text" placeholder="Please Select" name="">
                        <button><img src="img/header/vector.png" alt=""></button>
                    </label>
                </div>
                <div class="booking-form__input-block">
                    <p class="booking-title">Time *</p>
                    <label>
                        <input type="text" placeholder="4:00 Available" name="">
                        <button><img src="img/header/vector.png" alt=""></button>
                    </label>
                </div>

                <button class="booking-form__input-button bg-navy">
                    Book Appointment
                </button>

            </div>

        </div>


    </div>
</header>


<!-- ---------- ADVICE-BLOCK ---------- -->
<section class="advice-block">

    <!-- ---------- ADVICE-TITLE -->
    <div class="section-title">
        <h1 class="common-title-m">Practice Advice</h1>
        <p class="common-title-text">Problems trying to resolve the conflict between<br>
            the two major realms of Classical physics: Newtonian mechanics </p>
    </div>

    <!-- ---------- ADVICE-ITEMS -->
    <div class="advice-block__item-list">

        <div class="advice-item">
            <div class="advice-item__top-line">
                <img src="img/advice/scales.png" alt="Frauds or Mislead">
                <p class="advice-item__title">Frauds or Mislead</p>
            </div>
            <div class="advice-item__body">
                <ul>
                    <li>- The best products start
                        with Figma
                    </li>
                    <li>- Design with real data</li>
                    <li>- Lightning fast prototyping</li>
                    <li>- Fastest way to organize</li>
                    <li>- Work at the speed of thought.</li>
                </ul>
                <div class="div">
                    <p class="common-text">
                        <a>Learn more</a>
                    </p>
                </div>
            </div>

        </div>
        <div class="advice-item">
            <div class="advice-item__top-line">
                <img src="img/advice/gavel.png" alt="Bailes & Warrants">
                <p class="advice-item__title">Bailes & Warrants</p>
            </div>
            <div class="advice-item__body">
                <ul>
                    <li>- The best products start
                        with Figma
                    </li>
                    <li>- Design with real data</li>
                    <li>- Lightning fast prototyping</li>
                    <li>- Fastest way to organize</li>
                    <li>- Work at the speed of thought.</li>
                </ul>
                <div class="div">
                    <p class="common-text">
                        <a>Learn more</a>
                    </p>
                </div>
            </div>

        </div>
        <div class="advice-item">
            <div class="advice-item__top-line">
                <img src="img/advice/docs.png" alt="Federal Drug Crimes">
                <p class="advice-item__title">Federal Drug Crimes</p>
            </div>
            <div class="advice-item__body">
                <ul>
                    <li>- The best products start
                        with Figma
                    </li>
                    <li>- Design with real data</li>
                    <li>- Lightning fast prototyping</li>
                    <li>- Fastest way to organize</li>
                    <li>- Work at the speed of thought.</li>
                </ul>
                <div class="div">
                    <p class="common-text">
                        <a>Learn more</a>
                    </p>
                </div>
            </div>

        </div>

    </div>
</section>


<!-- ---------- ABOUT-BLOCK ---------- -->
<section class="about-block">

    <!-- ---------- ABOUT-TITLE -->
    <div class="section-title">
        <h1 class="common-title-m">Who We Are</h1>
        <p class="common-title-text">Problems trying to resolve the conflict between<br>
            the two major realms of Classical physics: Newtonian mechanics </p>
    </div>

    <!-- ---------- ABOUT-VIDEO -->
    <div class="about-block__video">

        <img class="cover" src="img/about/cover.jpg" alt="Who we are?">
        <button><img class="play-button" src="img/about/play-b.png" alt="PLAY"></button>

    </div>

</section>


<!-- ---------- FEEDBACK-BLOCK ---------- -->
<section class="feedback-block">


    <!-- ---------- FEEDBACK-TITLE -->
    <div class="section-title">
        <h1 class="common-title-m">What Clients Say</h1>
        <p class="common-title-text">Problems trying to resolve the conflict between<br>
            the two major realms of Classical physics: Newtonian mechanics </p>
    </div>

    <!-- ---------- FEEDBACK-REVIEW-LIST -->
    <div class="feedback-block__review-list">

        <div class="review-item">

            <div class="review-item__grades">
                <img src="img/feedback/grade.png" alt="4/5">
            </div>
            <div class="review-item__feedback-text">
                <p class="common-text">Slate helps you see how many
                    more days you need to work to
                    reach your financial goal.</p></div>
            <div class="review-item__author">
                <div class="review-item__photo">
                    <img src="img/feedback/profile-photo.png" alt="">
                </div>
                <div class="review-item__name">
                    <p>Regina Miles</p>
                </div>
                <div class="review-item__speciality">
                    <p>Designer</p>
                </div>
            </div>

        </div>
        <div class="review-item">

            <div class="review-item__grades">
                <img src="img/feedback/grade.png" alt="4/5">
            </div>
            <div class="review-item__feedback-text">
                <p class="common-text">Slate helps you see how many
                    more days you need to work to
                    reach your financial goal.</p></div>
            <div class="review-item__author">
                <div class="review-item__photo">
                    <img src="img/feedback/profile-photo.png" alt="">
                </div>
                <div class="review-item__name">
                    <p>Regina Miles</p>
                </div>
                <div class="review-item__speciality">
                    <p>Designer</p>
                </div>
            </div>

        </div>
        <div class="review-item">

            <div class="review-item__grades">
                <img src="img/feedback/grade.png" alt="4/5">
            </div>
            <div class="review-item__feedback-text">
                <p class="common-text">Slate helps you see how many
                    more days you need to work to
                    reach your financial goal.</p></div>
            <div class="review-item__author">
                <div class="review-item__photo">
                    <img src="img/feedback/profile-photo.png" alt="">
                </div>
                <div class="review-item__name">
                    <p>Regina Miles</p>
                </div>
                <div class="review-item__speciality">
                    <p>Designer</p>
                </div>
            </div>

        </div>

    </div>

</section>


<!-- ---------- ATTORNEYS-BLOCK ---------- -->
<section class="attorneys-block">

    <!-- ---------- ATTORNEYS-TITLE -->
    <div class="section-title">
        <h1 class="common-title-m">Meet Our Attorneys</h1>
        <p class="common-title-text">Problems trying to resolve the conflict between<br>
            the two major realms of Classical physics: Newtonian mechanics </p>
    </div>

    <!-- ---------- ATTORNEYS-PERSON-LIST -->
    <div class="attorneys-block__person-list">

        <div class="attorneys-block__profile">

            <div class="profile__photo">
                <img src="img/attorneys/fletcher.png" alt="Ashley Fletcher">
            </div>

            <div class="profile__info">
                <p class="common-text profile-name">Ashley Fletcher</p>
                <p class="common-text profile-position">LAYER & CEO</p>
                <div class="profile__social-buttons">
                    <img src="img/attorneys/fb.png" alt="Facebook">
                    <img src="img/attorneys/inst.png" alt="Instagram">
                    <img src="img/attorneys/tweet.png" alt="Tweeter">
                </div>
            </div>

        </div>
        <div class="attorneys-block__profile">

            <div class="profile__photo">
                <img src="img/attorneys/stratton.png" alt="Rodney Stratton">
            </div>

            <div class="profile__info">
                <p class="common-text profile-name">Rodney Stratton</p>
                <p class="common-text profile-position">CEO</p>
                <div class="profile__social-buttons">
                    <img src="img/attorneys/fb.png" alt="Facebook">
                    <img src="img/attorneys/inst.png" alt="Instagram">
                    <img src="img/attorneys/tweet.png" alt="Tweeter">
                </div>
            </div>

        </div>
        <div class="attorneys-block__profile">

            <div class="profile__photo">
                <img src="img/attorneys/beaton.png" alt="Avie Beaton">
            </div>

            <div class="profile__info">
                <p class="common-text profile-name">Avie Beaton</p>
                <p class="common-text profile-position">LAYER CIVIL LAW</p>
                <div class="profile__social-buttons">
                    <img src="img/attorneys/fb.png" alt="Facebook">
                    <img src="img/attorneys/inst.png" alt="Instagram">
                    <img src="img/attorneys/tweet.png" alt="Tweeter">
                </div>
            </div>

        </div>


    </div>


</section>


<!-- ---------- APPOINTMENT-BLOCK ---------- -->
<section class="appointment-block">

    <!-- ---------- APPOINTMENT-BLOCK-TITLE -->
    <div class="appointment-block__title">

        <h5 class="common-title-xs">Contact Us</h5>
        <h2 class="common-title-m">Make an Appointment</h2>

    </div>

    <!-- ---------- APPOINTMENT-BLOCK-INPUT-BLOCK -->
    <div class="appointment-block__input-form">

        <div>
            <label>
                <input class="input-form__name" type="text" placeholder="Full name">
            </label>
        </div>

        <div>
            <label>
                <input class="input-form__email" type="email" placeholder="example@gmail.com">
            </label>
        </div>

        <div>
            <label>
                <input class="input-form__select" type="text" placeholder="Please Select">
                <button><img src="img/header/vector.png" alt=""></button>
            </label>
        </div>

        <div>
            <label>
                <input class="input-form__time" type="text" placeholder="4:00 Available">
                <button><img src="img/header/vector.png" alt=""></button>
            </label>
        </div>

        <div class="input-form__message">
            <label>
                <textarea placeholder="Message"></textarea>
            </label>
        </div>

    </div>

    <!-- ---------- APPOINTMENT-BLOCK-BUTTON-BLOCK -->
    <div class="appointment-block__button-block">

        <button class="appointment-block__booking-button bg-brown">
            Book Appointment
        </button>

    </div>


</section>


<!-- ---------- REQUEST-BLOCK ---------- -->
<section class="request-block">

    <!-- ---------- REQUEST-TITLE -->
    <div class="request-block__title">
        <h3 class="common-title-s">Request A Free Consultation</h3>
        <p class="common-text">
            the quick fox jumps over the lazy dog
        </p>
    </div>

    <!-- ---------- REQUEST-BUTTON -->
    <button class="request__bottom-button bg-brown">
        Contact Us
    </button>
</section>


<!-- ---------- FOOTER ---------- -->
<footer class="footer">

    <!-- ---------- FOOTER-TOP-LINE ---------- -->
    <div class="footer__top-line bg-dark-blue">

        <div class="content">

            <div class="footer__title">

                <h3 class="common-title-s">Litigade</h3>

            </div>

            <div class="footer__social-buttons">

                <img src="img/footer/fb.png" alt="Facebook">
                <img src="img/footer/inst.png" alt="Instagram">
                <img src="img/footer/twit.png" alt="Twitter">
                <img src="img/footer/tube.png" alt="YouTube">

            </div>

        </div>



    </div>

    <!-- ---------- FOOTER-MIDDLE-LINE ---------- -->
    <div class="footer__middle-line bg-dark-blue">
        <div class="content">

            <div class="footer__info-block">

                <div class="info-block__company">
                    <ul class="common-title-xs">Company Info
                        <li>About Us</li>
                        <li>Carrier</li>
                        <li>We are hiring</li>
                        <li>Blog</li>
                    </ul>

                </div>
                <div class="info-block__legal">
                    <ul class="common-title-xs">Company Info
                        <li>About Us</li>
                        <li>Carrier</li>
                        <li>We are hiring</li>
                        <li>Blog</li>
                    </ul>
                </div>
                <div class="info-block__features">
                    <ul class="common-title-xs">Company Info
                        <li>Business Marketing</li>
                        <li>User Analytic</li>
                        <li>Live Chat</li>
                        <li>Unlimited Support</li>
                    </ul>
                </div>
                <div class="info-block__resources">
                    <ul class="common-title-xs">Company Info
                        <li>IOS & Android</li>
                        <li>Watch a Demo</li>
                        <li>Customers</li>
                        <li>API</li>
                    </ul>
                </div>

            </div>

            <div class="footer__subscribe-form">

                <div>
                <h5 class="common-title-xs">Get In Touch</h5>
                </div>

                <label>
                    <input type="text" class="subscribe-area" placeholder="Your Email">
                    <button class="subscribe-button bg-gold">Subscribe</button>

                </label>
                <div>
                <p class="footer__lorem-text">Lorem ipsum dolor sit amet</p>
                </div>

            </div>

        </div>
    </div>

    <!-- ---------- FOOTER-BOTTOM-LINE ---------- -->
    <div class="footer__bottom-line bg-navy">

        <div class="content">

            <p class="common-text">Made With Love By
                Figmaland All Right Reserved </p>

        </div>

    </div>

</footer>


</body>
</html>


<ul>
    <li> item 1</li>
    <li> <b> item <i> 2</b> ugly</i></li>
    <li> item 3 </li>
</ul>